<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-13 09:17:36
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-03 17:56:14
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/dynamicTags/dynamicTags.vue
 * @Description: 动态标签
-->
<script setup>
import { ref } from 'vue'
import ClockLoading from '@/components/clockLoading/clockLoading.vue';

const props = defineProps({
  tags: {
    type: Array,
    default: () => {
      return []
    }
  },
  color: {
    type: String,
    default: '#FC5073'
  },
  'label-field': {
    type: String,
    default: 'value'
  },
  customCreate: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['createTags', 'closeTags'])

let input = ref(null)
let show = ref(false)
let tag = ref(null)
let showSpin = ref(false)

const changeShow = (flag) => {
  show.value = flag
  if (show.value) {
    setTimeout(() => {
      input?.value?.focus()
      document.getElementById('inputEle').addEventListener('keypress', (e) => {
        let theEvent = e || window.event
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode
        if (code == 13) {
          e.preventDefault()
          showSpin.value = true
          emit('createTags', {
            tag: tag.value,
            callback: () => {
              showSpin.value = false
              tag.value = ''
            }
          })
        }
      })
    }, 1)
  }
}
const closeFunc = (tag) => {
  showSpin.value = true
  emit('closeTags', {
    tag,
    callback: () => {
      showSpin.value = false
    }
  })
}
</script>
<template>
  <div style="display: flex; align-items: center; flex-wrap: wrap">
    <div style="cursor: pointer; display: flex; align-items: center; flex-wrap: wrap">
      <div v-for="(item, index) in tags" :key="index" style="
          border-radius: 0.125rem;
          font-size: 14px;
          padding: 0.25rem;
          height: 1.75rem;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          margin-right: 0.625rem;
          margin-bottom: 0.3125rem;
          margin-top: 0.3125rem;
        " :style="{ color, border: `.0625rem solid ${color}70`, background: `${color}20` }">
        <span>{{ typeof item == 'object' ? item[props['labelField']] : item }}</span>
        <span style="margin-left: 0.375rem; user-select: none" @click="closeFunc(item)">X</span>
      </div>
    </div>
    <div style="display: flex; align-items: center; margin: 0.3125rem 0">
      <div v-if="show" style="
          width: 4.375rem;
          border-radius: 0.125rem;
          padding: 0 0.25rem;
          height: 1.75rem;
          display: flex;
          align-items: center;
          box-sizing: border-box;
        " :style="{
          border: `.0625rem solid ${color}`,
          outline: `.125rem solid ${color}60`,
          caretColor: color
        }">
        <input v-model="tag" type="text" @blur="changeShow(false)" ref="input" id="inputEle"
          style="font-size: 13px; width: 100%" />
      </div>
      <div v-else style="
          padding: 0 0.625rem;
          border-radius: 0.125rem;
          cursor: pointer;
          height: 1.75rem;
          display: flex;
          align-items: center;
          box-sizing: border-box;
        " :style="{ border: `.0625rem dashed #ccc`, color: '#999' }" @click="changeShow(true)">
        +
      </div>
    </div>
    <!-- <NSpin v-if="showSpin" size="small" style="margin-left: 0.625rem" /> -->
    <transition name="base">
      <ClockLoading v-if="showSpin" color="#DC4A69" style="transform: scale(.7);margin-left: 0.625rem"></ClockLoading>
    </transition>
  </div>
</template>
<style scoped>
input {
  background: none;
  outline: none;
  border: none;
}

input:focus {
  border: none;
}
</style>
